<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2022/3/16
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-main">

    <div class="layui-form layuimini-form" lay-filter="movieFrom">
        <div class="layui-form-item">
            <label class="layui-form-label required">电影名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="name" lay-verify="required" lay-reqtext="电影名称不能为空" placeholder="请输入电影名称"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影类型</label>`
            <div class="layui-input-block">
                <select id="mtypeSelect" name="mtype.mid" lay-verify="required">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">电影图片上传</label>
            <div class="layui-input-block">
                <button id="test1" class="layui-btn layui-btn-normal" lay-submit lay-filter="">
                    上传图片
                </button>
                <img id="imgPathBro" src="images/loginbg.png" style="width: 50px;">
                <input id="picture" type="hidden" name="picture">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">剧情简介</label>
            <div class="layui-input-block">
                <textarea style="width: 500px;height: 40px" class="layui-textareal" type="text" name="plot" lay-verify="required"
                          lay-reqtext="剧情简介不能为空" placeholder="请输入剧情简介"
                       value="" class="layui-textarea">
                </textarea>>
            </div>
        </div>

        <%--<div class="layui-form-item layui-form-text">--%>
            <%--<label class="layui-form-label">普通文本域</label>--%>
            <%--<div class="layui-input-block">--%>
                <%--<textarea placeholder="请输入内容" class="layui-textarea"></textarea>--%>
            <%--</div>--%>
        <%--</div>--%>


        <div class="layui-form-item">
            <label class="layui-form-label required">导演</label>
            <div class="layui-input-block">
                <input type="text" name="author" lay-verify="required" lay-reqtext="导演姓名不能为空" placeholder="请输入导演姓名"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">电影时长</label>
            <div class="layui-input-block">
                <input type="text" name="mtime" lay-verify="required" lay-reqtext="电影时长不能为空" placeholder="请输入电影时长"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">电影价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" lay-verify="required" lay-reqtext="电影价格不能为空" placeholder="请输入电影价格"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">主演</label>
            <div class="layui-input-block">
                <input type="text" name="lead" lay-verify="required" lay-reqtext="主演名称不能为空" placeholder="请输入主演名称"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">主演图片上传</label>
            <div class="layui-input-block">
                <button id="test2" class="layui-btn layui-btn-normal" lay-submit lay-filter="">
                    上传主演图片
                </button>
                <img id="imgPathBro1" src="images/bg.jpg" style="width: 50px;">
                <input id="leadp" type="hidden" name="leadp">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$,
            upload = layui.upload;


        var uploadInst = upload.render({
            elem: '#test1'//绑定元素
            , url: 'movie/upload.do' //上传接口
            , done: function (res) {
                //上传完毕回调
                console.info("上传完成", res);
                $("#picture").val(res.target);
                //更改预览图片标签的src属性
                $("#imgPathBro").attr("src", "http://localhost:8888/img/" + res.target)
            }
            , error: function () {
                //请求异常回调
            }
        })
        //绑定图片上传
        var uploadInst = upload.render({
            elem: '#test2'//绑定元素
            , url: 'movie/upload.do' //上传接口
            , done: function (res) {
                //上传完毕回调
                console.info("上传完成", res);
                $("#leadp").val(res.target);
                //更改预览图片标签的src属性
                $("#imgPathBro1").attr("src", "http://localhost:8888/img/" + res.target)
            }
            , error: function () {
                //请求异常回调
            }
        })


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        $.ajax({
            url: 'movie/listAllMtypes.do',
            dataType: 'json',
            type:'post',
            async:false,
            success: function (data) {
                $.each(data, function (index, item) {
                    console.log("item",item);
                    //option 第一个参数是页面显示的值，第二个参数是传递到后台的值
                    $('#mtypeSelect').append(new Option(item.mname,item.mid));//往下拉菜单里添加元素
                })
                //form.render(); //更新全部表单内容
                form.render("select"); //刷新表单select选择框渲染

            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.post("movie/saveOrUpdate.do", data.field, function (data) {
                //如果操作成功
                if (data.success) {
                    layer.close(parentIndex);
                    //刷新数据
                    table.reload("currentTableId");
                } else {
                    layer.msg(data.error);
                }
            })
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //
            //     // 关闭弹出层
            //
            // });


            return false;
        });

    });
</script>
